import React, { Component } from 'react';
class Slot1 extends Component {
    render() {
        return (
            <div className="nav-item nav-bar">
                <div className="nav-left">
                    {this.props.children[0]}
                </div>
                <div className="nav-item nav-center">
                    {this.props.children[1]}
                </div>
                <div className="nav-item nav-right">
                    {this.props.children[2]}
                </div>
            </div>
        )
    }
}

class Slot2 extends Component {
    render() {
        const { leftSlot, centerSlot, rightSlot } = this.props;
        return (
            <div className="nav-item nav-bar">
                <div className="nav-left">
                    {leftSlot}
                </div>
                <div className="nav-item nav-center">
                    {centerSlot}
                </div>
                <div className="nav-item nav-right">
                    {rightSlot}
                </div>
            </div>
        )
    }
}

export default class Content extends Component {
    render() {
        const leftJsx = <span>aaa</span>;
        return (
            <div>
                <Slot1>
                    <span>aaa</span>
                    <strong>bbb</strong>
                    <a href="/#">ccc</a>
                </Slot1>
                <Slot2
                    leftSlot={leftJsx}
                    centerSlot={<strong>bbb</strong>}
                    rightSlot={<a href="/#">ccc</a>}
                ></Slot2>
            </div>
        )
    }
}